import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { CollectionListCardMock } from './mock'
import { PlusOutlined, MinusOutlined, CheckOutlined } from '@ant-design/icons'

interface CollectionListCardProps {
    img: any
    imgId: string
}

export default function CollectionListCard(props: CollectionListCardProps) {
    const [collectionListCard, setCollectionListCard] = useRecoilState(CollectionListCardMock)
    const [isCollected, setIsCollected] = useState(false)

    useEffect(() => {
        // console.log(collectionListCard[0].photo[0].img)
    }, [])

    const handleAddCollectionImgBtn = () => {}

    return (
        <div className={style.container}>
            <p>添加到收藏夹</p>
            <div className={style.content}>
                <div className={style.create__item}>
                    <span>创建收藏夹</span>
                </div>

                {collectionListCard.map((item, index) => {
                    let test = isCollected
                    return (
                        <div className={style.item} key={index}>
                            {item.photo ? (
                                <div className={style.item__bg}>
                                    {/*{isCollected ? <img src={props.img} /> : <img src={item.photo[0]} />}*/}
                                    {item.photo.map((imgItem, index) => {
                                        if (props.imgId == imgItem.imgId) {
                                            return <img src={props.img} />
                                        } else {
                                            return <img src={imgItem.imgUrl} />
                                        }
                                    })}
                                </div>
                            ) : (
                                ''
                            )}
                            <div className={`${style.mask} ${isCollected ? 'collected' : 'collect'}`}>
                                <div
                                    className={style.mask__content}
                                    onClick={() => {
                                        setIsCollected(!isCollected)
                                    }}>
                                    {isCollected ? (
                                        <>
                                            <span>{item.num + 1} 张照片</span>
                                            <p>{item.collectionName}</p>
                                            <div className={style.mask__icon}>
                                                <MinusOutlined className={style.icon__minus} />
                                                <CheckOutlined className={style.icon__check} />
                                            </div>
                                        </>
                                    ) : (
                                        <>
                                            <span>{item.num} 张照片</span>
                                            <p>{item.collectionName}</p>
                                            <div className={style.mask__icon}>
                                                <PlusOutlined className={style.icon__plus} />
                                            </div>
                                        </>
                                    )}
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
